<script >
import axios from "axios";

export default {
    data(){
        return{
            bianji:'',
            drafList: [],
            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }

    },
    methods:{
        async getnewlist() {
            const userId = this.$store.getters.getuserId;
            try {
                console.log("我是"+userId);
                const response = await axios.get(`/api/news/getAllDraft?publisherId=${userId}`);
                const responseData = response.data;
                this.drafList = await Promise.all(responseData.map(async (drafItem) => {
                    try {
                        const picturesResponse = await axios.get(`/api/picture?newId=${drafItem.new_id}`);
                        const picturesData = picturesResponse.data;
                        console.log("我设置了" + picturesData[0].pictureSrc);
                        return {
                            ...drafItem,
                            pictures: picturesData[0],
                        };
                    } catch (error) {
                        console.error("请求失败，使用默认图片");
                        return {
                            ...drafItem,
                            pictures: { pictureSrc: "https://img.zcool.cn/community/0177965ad579eba8012040295d8025.png@1280w_1l_2o_100sh.png" },
                        };
                    }
                }));

            } catch (error) {
                console.error('Error fetching data:', error);
            }
        },
       async handleDelete(new_id){
           try {
               const user_id = this.$store.getters.getuserId;
               const url = `/api/news/deleteNewsDraft?newId=${new_id}&publisherId=${user_id}`;
               const response = await axios.get(url);
               console.log('删除成功', response.data);
               this.getnewlist();
           } catch (error) {
               console.error('删除失败', error);
           }
        },
        async turn(new_id){
            this.$store.state.newId=new_id;
            this.$router.push('/newsdetail');
        }
    },
    mounted() {
        this.getnewlist();
    }

}
</script>

<template>
    <div>
        <h1 style="text-align: left;">草稿箱</h1>
        <el-divider></el-divider>
        <div class="waterfall-container">
        <div v-for="(drafItem, index) in drafList" :key="index" style="display: flex" class="waterfall-item" >
                    <el-card class="box-card" style="padding: 0px;display: flex">
                        <div style="margin: 5px; height: 20%; display: flex; align-items: center;">
                         <div style="width:60%">{{drafItem.new_title}}</div>
                           <div style="width: 40%;border: 0;display: flex">
                               <div style="width: 50%;padding: 10px;" :href="bianji"><el-link>编辑</el-link></div>
                            <div style="width: 50%"><el-popconfirm
                                confirm-button-text='好的'
                                cancel-button-text='不用了'
                                icon="el-icon-info"
                                icon-color="red"
                                title="这是一段内容确定删除吗？"
                                @confirm="handleDelete(drafItem.new_id)"
                            >
                                <div></div>
                                <el-button slot="reference">删除</el-button>
                            </el-popconfirm></div></div>
        </div>

                        <div class="block" style="height: 80%;background: rgba(171,176,185,0.38)">
                            <el-image :src="drafItem.pictures.pictureSrc" ></el-image>
                        </div>
                    </el-card>



        </div></div>
    </div>
</template>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.full-width-height{
height: 100%;
}

.waterfall-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.waterfall-item {
    width: calc(50% - 10px);
    margin-bottom: 10px;
}

.box-card {
    width: auto;
    height: auto;
}
/deep/.el-card__body, .el-main {
    padding: 0;
}
/deep/.el-button{
    border: 0;
}
</style>